<template>
    <div class="container">
      <div class="head_component">
        <TitleHead v-if="!state" @show="cityShow" :cityName="citylocation"></TitleHead>
        <Headitem v-else @trigger="submit"></Headitem>
      </div>

      <div class="main">
        <router-view :cityadd="activation" :cityId="citylocation"></router-view>
      </div>
      <div class="footer_component">
       <FooterList @investment="headerTitle" :cityData="citylocation"></FooterList>
      </div>
      <LayerComponent @hide="cityShow" v-show="showStyle"></LayerComponent>
    </div>
</template>
<style>
.container{
  width:100%;
  height:100%;
  position:relative;
}
.head_component{
  width:100%;
  height:0.9rem;
  background:#ff0033;
}
.main{
  position:absolute;
  top:0.9rem;
  bottom:1rem;
  left:0;
  right:0;
  overflow-y: auto;
}
.footer_component{
  position:absolute;
  height:1rem;
  left:0;
  bottom:0;
  width:100%;

}


.header_invest{
  height:100%;
  text-align: center;
  font-size: 0.3rem;
  position:relative;
  /*border:2px solid #eee;*/
  /*background:#ccc;*/
  line-height:1rem;
  /*display:none;*/
  color:#fff;
  /*z-index: 3;*/
}
.header_invest span{
  position:absolute;
  right:0.3rem;
  top:50%;
  transform: translateY(-50%);
  font-size:0.26rem;
  color:#fff;
}
</style>
<script >
    import TitleHead from './components/head'
    import FooterList from './components/footer'
    import HomeComponent from './container/home'
    import LayerComponent from './components/LayerSelectCity.vue'
    const Headitem = {
      template:`<div class="header_invest item_head ">
            我要投资
              <span @click="confirm">
               确定
              </span>
        </div>`,
        data(){
          return{
            submit:false
          }
        },
        methods:{
          confirm(){
           this.submit = !this.submit;
           this.$emit('trigger',this.submit)
          }
        }
    };
      export default {
        // name: 'app',
        data () {
            return {
              state:false,
              showStyle:false,
              citylocation : 0,
              activation:false
            }
        },
        methods:{
          headerTitle(b){
            if(b){
              //console.log(b)
              this.state = true
            }else{
              this.state = false
            }
          },
          ishead(key){
            const urlParam = (key) => {
              var reg = new RegExp(key + '=([^&]*)');
              var results = location.href.match(reg);
              return results ? results[1] : null;
            }
            let index = urlParam(key)
            //alert(index)
            if(index==3){
              this.state = true
            }else{
              this.state = false
            }
          },
          cityShow(b,c){
            if(c || c === 0){
              //alert(c)
              this.citylocation = c; //父组件向所有分支的子组件后代扩播事件消息；
            }
            if(b){
              this.showStyle = b;
            }else{
              this.showStyle = !this.showStyle
            }
          },
          submit(e){
          this.activation = e;
          }

        },
        mounted(){
          this.ishead('plan');
        },
        watch:{
          activation:(val)=>{
          //alert(val)
        }
        },
        components:{
          TitleHead,
          FooterList,
          HomeComponent,
          Headitem,
          LayerComponent
        }
    }
</script>
